<template>
  <div>
   <!-- 主内容区域 -->
    <div class="main-content">
      <div class="page-title">通知设置</div>

      <!-- 通知类型管理 -->
      <div class="notification-section">
        <div class="section-title">通知类型管理</div>

        <!-- 内容相关通知 -->
        <div class="notification-item">
          <div class="notification-title">内容互动通知</div>
          <div class="notification-desc">当内容收到评论、点赞、收藏时的通知</div>

          <div class="push-method">
            <div class="method-label">
              <el-checkbox v-model="notifications.content.comment" label="comment"></el-checkbox>
              <div class="method-icon email"><i class="fa-solid fa-envelope"></i></div>
              邮箱通知
            </div>

            <div class="method-label">
              <el-checkbox v-model="notifications.content.like" label="like"></el-checkbox>
              <div class="method-icon sms"><i class="fa-solid fa-mobile-screen-button"></i></div>
              短信通知
            </div>

            <div class="method-label">
              <el-checkbox v-model="notifications.content.collect" label="collect"></el-checkbox>
              <div class="method-icon app"><i class="fa-solid fa-bell"></i></div>
              App推送
            </div>
          </div>
        </div>

        <!-- 粉丝相关通知 -->
        <div class="notification-item">
          <div class="notification-title">粉丝动态通知</div>
          <div class="notification-desc">当有新粉丝关注、粉丝互动时的通知</div>

          <div class="push-method">
            <div class="method-label">
              <el-checkbox v-model="notifications.fans.follow" label="follow"></el-checkbox>
              <div class="method-icon email"><i class="fa-solid fa-envelope"></i></div>
              邮箱通知
            </div>

            <div class="method-label">
              <el-checkbox v-model="notifications.fans.interaction" label="interaction"></el-checkbox>
              <div class="method-icon app"><i class="fa-solid fa-bell"></i></div>
              App推送
            </div>
          </div>
        </div>

        <!-- 系统通知 -->
        <div class="notification-item">
          <div class="notification-title">系统公告通知</div>
          <div class="notification-desc">平台更新、安全提醒等重要通知</div>

          <div class="push-method">
            <div class="method-label">
              <el-checkbox v-model="notifications.system.announcement" label="announcement" disabled></el-checkbox>
              <div class="method-icon email"><i class="fa-solid fa-envelope"></i></div>
              邮箱通知（默认开启）
            </div>

            <div class="method-label">
              <el-checkbox v-model="notifications.system.security" label="security"></el-checkbox>
              <div class="method-icon sms"><i class="fa-solid fa-mobile-screen-button"></i></div>
              短信通知
            </div>
          </div>
        </div>
      </div>

      <!-- 高级设置 -->
      <div class="notification-section">
        <div class="section-title">高级设置</div>

        <div class="notification-item">
          <div class="notification-title">夜间免打扰</div>
          <div class="notification-desc">开启后，在指定时间段内暂停所有通知</div>

          <div class="night-mode">
            <el-switch v-model="nightMode" active-text="已开启" inactive-text="已关闭"></el-switch>
            <div v-if="nightMode" class="time-range">
              <span>每日 {{ nightStart }}:00 - {{ nightEnd }}:00 免打扰</span>
              <el-slider
                v-model="nightStartHour"
                :min="0"
                :max="23"
                :step="1"
                show-input
                format-tooltip="HH:00"
                style="width: 200px; margin: 0 10px;"
              ></el-slider>
              <span>至</span>
              <el-slider
                v-model="nightEndHour"
                :min="0"
                :max="23"
                :step="1"
                show-input
                format-tooltip="HH:00"
                style="width: 200px;"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="notification-item">
          <div class="notification-title">通知频率限制</div>
          <div class="notification-desc">限制同一类型通知的发送频率</div>

          <el-slider
            v-model="frequencyLimit"
            :min="1"
            :max="5"
            show-input
            :format-tooltip="() => `每小时最多 ${frequencyLimit} 条`"
            style="width: 300px;"
          ></el-slider>
        </div>
      </div>

      <!-- 保存按钮 -->
      <el-button type="primary" @click="handleSave" style="margin-top: 20px;">
        <i class="fa-solid fa-save"></i> 保存设置
      </el-button>
    </div>

    </div>
</template>

<script>
export default {
  name: 'NotificationSettings',
  data() {
    return {
      activeMenu: 'settings-notification', // 侧边栏激活项
      notifications: {
        content: {
          comment: true,
          like: false,
          collect: true
        },
        fans: {
          follow: true,
          interaction: true
        },
        system: {
          announcement: true,
          security: true
        }
      },
      nightMode: false,
      nightStartHour: 22,
      nightEndHour: 8,
      frequencyLimit: 3
    }
  },
  computed: {
    // 计算属性：格式化夜间免打扰时间
    nightStart() {
      return this.nightStartHour.toString().padStart(2, '0');
    },
    nightEnd() {
      return this.nightEndHour.toString().padStart(2, '0');
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSave() {
      // 实际应用中应调用API保存设置
      console.log('保存通知设置:', this.notifications);
      console.log('夜间免打扰:', this.nightMode ? `${this.nightStart}:00-${this.nightEnd}:00` : '未开启');
      console.log('通知频率限制:', this.frequencyLimit, '条/小时');

      // 模拟API请求
      this.$message({
        message: '通知设置已保存',
        type: 'success'
      });
    }
  }
}
</script>

<style lang="scss" scoped>

    /* 主内容区域 */
    //.main-content {
    //  margin-left: var(--sidebar-width);
    //  padding: 20px;
    //  padding-top: 80px;
    //}

    .page-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    /* 通知设置卡片 */
    .notification-section {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .notification-item {
      padding: 16px 0;
      border-bottom: 1px solid #EBEEF5;
    }

    .notification-item:last-child {
      border-bottom: none;
    }

    .notification-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .notification-desc {
      color: var(--gray-color);
      font-size: 14px;
      margin-bottom: 12px;
    }

    .push-method {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .method-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .method-icon {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .method-icon.email { background-color: #3399FF; color: white; }
    .method-icon.sms { background-color: #4CD964; color: white; }
    .method-icon.app { background-color: #FF4444; color: white; }

    .night-mode {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* 页脚 */
    .footer {
      padding: 20px 0;
      text-align: center;
      color: var(--gray-color);
      font-size: 14px;
    }
</style>
